<template>
	<!-- 头部搜索框 -->
	<view>
		<view class="navigator">
			<image src="../../static/images/search.png"></image>
			<text style="color: #ccc;">搜索商品</text>
		</view>

		<!-- 左边身体部分 -->
		<view class="box1">
			<scroll-view scroll-y class="box2" style="height: 1080rpx;">
				<block v-for="(item,index) in arr" :key="index">
					<view class="shar " @click="chooseItem(index)" :class="currentIndex==index?'poss':''">{{item}}</view>					
				</block>
			</scroll-view>
		</view>

		<scroll-view scroll-y="true" class="box3">
			<view class="rous">
				<block v-for="(item,index) in sele" :key="index">
					<view>
						<image :src="item.src" class="imgleft"></image>
					</view>
					<view class="naiwe">
						<view class="dins">{{item.name}}</view>
						<view class="dind">{{item.retail}}</view>
						<view class="dinf">{{item.money}}</view>
					</view>
				</block>
			</view>
		</scroll-view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				currentIndex:0,
				arr: [
					"热销", "集成灶", "蒸箱烤箱", "水槽", "夏季焕新", "生鲜食品", "美妆服饰", "家居家电", "新鲜水果", "品质家纺",
					"热销", "集成灶", "蒸箱烤箱", "水槽", "夏季焕新", "生鲜食品", "美妆服饰", "家居家电", "新鲜水果", "品质家纺",
					"热销", "集成灶", "蒸箱烤箱", "水槽", "夏季焕新", "生鲜食品", "美妆服饰", "家居家电", "新鲜水果", "品质家纺"
				],
				 sele :[
				            {
				                src :"../../static/images/goods/1.jpg",
				                name:"娃娃大王的",
				                retail:"已售出20件",
				                money:"￥244"
				            },
				            {
				                src :"../../static/images/goods/2.jpg",
				                name:"娃娃大王的",
				                retail:"已售出30件",
				                money:"￥244"
				            },
				            {
				                src :"../../static/images/goods/3.jpg",
				                name:"娃娃大王的",
				                retail:"已售出40件",
				                money:"￥244",
				            },
				            {
				                src :"../../static/images/goods/4.jpg",
				                name:"娃娃大王的",
				                retail:"已售出10件",
				                money:"￥244",
				            },
				            {
				                src :"../../static/images/goods/5.jpg",
				                name:"娃娃大王的",
				                retail:"已售出10件",
				                money:"￥244",
				            },
				            {
				                src :"../../static/images/goods/6.jpg",
				                name:"娃娃大王的",
				                retail:"已售出10件",
				                money:"￥244",
				            },
				            {
				                src :"../../static/images/goods/7.jpg",
				                name:"娃娃大王的",
				                retail:"已售出10件",
				                money:"￥244",
				            },
				            {
				                src :"../../static/images/goods/8.jpg",
				                name:"娃娃大王的",
				                retail:"已售出10件",
				                money:"￥244",
				            },
				            {
				                src :"../../static/images/goods/9.jpg",
				                name:"娃娃大王的",
				                retail:"已售出10件",
				                money:"￥244",
				            },
				            {
				                src :"../../static/images/goods/10.jpg",
				                name:"娃娃大王的",
				                retail:"已售出10件",
				                money:"￥244",
				            },
				            {
				                src :"../../static/images/goods/11.jpg",
				                name:"娃娃大王的",
				                retail:"已售出10件",
				                money:"￥244",
				            },
				            {
				                src :"../../static/images/goods/12.jpg",
				                name:"娃娃大王的",
				                retail:"已售出10件",
				                money:"￥244",
				            },
				            {
				                src :"../../static/images/goods/13.jpg",
				                name:"娃娃大王的",
				                retail:"已售出10件",
				                money:"￥244",
				            },
				
				
				        ],
						
			}
		},
		methods: {
			chooseItem(index) {
			    this.currentIndex= index
				// console.log(index)
			},
		}
	}
</script>

<style scoped>
	.search_input {
		height: 100rpx;
		line-height: 100rpx;
		background-color: #F8F8F8;

	}

	.navigator {
		height: 80rpx;
		width: 720rpx;
		background-color: #fff;
		text-align: center;
		border: 2px solid red;
		margin: 10rpx;
		line-height: 80rpx;
	}


	.navigator image {
		width: 40rpx;
		height: 40rpx;
		vertical-align: middle;

	}
	
	.box2{
	    width: 34%;
	    background-color: #FAFCFF; 
	    float: left;
	}
	.box3{
	    width: 66%;height: 1100rpx;background-color:white;
	    float: left;
	}
	.box3 image{
	    width: 240rpx;height: 240rpx;
	}
	
	.poss{
		background-color:#ccc;
	}
	
	.shar {
		height: 100rpx;
		line-height: 100rpx;
		text-indent: 1em;
	}
	.rous{
	    height: 440rpx;
	}
	
	.imgleft{
	    width: 20%;float: left;height: 420rpx;
	}
	
	.naiwe{
	    float: right;
	    border-bottom: 1px solid red;
	    width: 46%;font-size: 26rpx;
	    height: 238rpx;
	}
	
	.dins{
	    height: 90rpx;line-height: 90rpx;font-size: 15px;
	}
	.dind{
	    height: 50rpx;line-height: 50rpx;font-size: 15px;
	}
	.dinf{
	    height: 90rpx;line-height: 90rpx;font-size: 15px;
	    color: red;
	}
</style>
